<template>
  <div>
    <bread>
      <span slot="manage">商品管理</span>
      <span slot="add">商品列表</span>
    </bread>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="inputDate" label="日期"  width="200"></el-table-column>
      <el-table-column prop="productId" label="商品ID"  width="250"></el-table-column>
      <el-table-column prop="productName" label="商品名称"  width="250"></el-table-column>
      <el-table-column prop="productPrice" label="商品价格"  width="250"></el-table-column>
      <el-table-column prop="productImage" label="商品图片"  width="250"></el-table-column>
      <el-table-column prop="productUrl" label="商品链接"  width="250"></el-table-column>
      <el-table-column label="操作"  width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">取消</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import Bread from '../Bread'
  export default {
    data() {
      return {
        // 商品表
        tableData: []
      }
    },
    components: {
      Bread
    },
    mounted() {
      this.getGoodsList()
    },
    methods: {
      getGoodsList() {
        this.$http.get("/goods").then((response) => {
          let data = response.body;
          this.tableData = data.result;
          console.log(this.tableData[0]);
        });
      },
      handleClick(row) {
        console.log(row.inputDate);
      }
    }
  }
</script>
